<template>
  <!-- 商品详情-带货达人 -->
  <div class="shopDetails">
    <template>
      <div>
        <div class="shopDetailsLeft">
          <template v-if="!loading">
            <div class="hei3">
              <el-popover placement="bottom" trigger="hover" popper-class="hot_video_popover">
                <vue-qr
                  :size="150"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  v-if="response01"
                  :text="response01.shopUrl ? response01.shopUrl : ''"
                />
                <p>【抖音扫码，查看店铺】</p>
                <img slot="reference" class="code" src="@/assets/liu/goodsDetailsCode.png" />
              </el-popover>
            </div>
            <div>
              <div class="imgBox">
                <el-popover
                  placement="right"
                  width="200"
                  popper-class="big_img"
                  :visible-arrow="false"
                  trigger="click"
                >
                  <img
                    :src="response01 && response01.shopLogo"
                    v-errorImg:smallShop
                    slot="reference"
                  />
                  <img :src="response01 && response01.shopLogo" alt />
                </el-popover>
                <!-- <img :src="response01 && response01.shopLogo" alt /> -->
              </div>
              <div class="nickName">{{ response01 && response01.shopTitle }}</div>
            </div>
            <div class="public">
              <p>店铺口碑</p>
              <p v-if="!response01.shopscorelevel">{{ response01.shopscore }}</p>
              <p class="high" v-if="response01.shopscorelevel == 1">
                {{ response01 && response01.shopscore }}
                <span>高</span>
              </p>
              <p class="in" v-if="response01.shopscorelevel == 2">
                {{ response01 && response01.shopscore }}
                <span>中</span>
              </p>
              <p class="low" v-if="response01.shopscorelevel == 3">
                {{ response01 && response01.shopscore }}
                <span>低</span>
              </p>
              <img @click="popLine" class="k_line" src="../../../assets/shi/k-line.png" alt />
            </div>
            <div class="public">
              <p>商品体验</p>
              <p v-if="!response01.wordofmouthlevel">{{ response01.wordofmouth }}</p>
              <p class="high" v-if="response01.wordofmouthlevel == 1">
                {{ response01 && response01.wordofmouth }}
                <span>高</span>
              </p>
              <p class="in" v-if="response01.wordofmouthlevel == 2">
                {{ response01 && response01.wordofmouth }}
                <span>中</span>
              </p>
              <p class="low" v-if="response01.wordofmouthlevel == 3">
                {{ response01 && response01.wordofmouth }}
                <span>低</span>
              </p>
            </div>
            <div class="public">
              <p>物流体验</p>
              <p v-if="!response01.deliveryspeedlevel">{{ response01.deliveryspeed }}</p>
              <p class="high" v-if="response01.deliveryspeedlevel == 1">
                {{ response01 && response01.deliveryspeed }}
                <span>高</span>
              </p>
              <p class="in" v-if="response01.deliveryspeedlevel == 2">
                {{ response01 && response01.deliveryspeed }}
                <span>中</span>
              </p>
              <p class="low" v-if="response01.deliveryspeedlevel == 3">
                {{ response01 && response01.deliveryspeed }}
                <span>低</span>
              </p>
            </div>
            <div class="public">
              <p>商家服务</p>
              <p v-if="!response01.serviceattitudelevel">{{ response01.serviceattitude }}</p>
              <p class="high" v-if="response01.serviceattitudelevel == 1">
                {{ response01 && response01.serviceattitude }}
                <span>高</span>
              </p>
              <p class="in" v-if="response01.serviceattitudelevel == 2">
                {{ response01 && response01.serviceattitude }}
                <span>中</span>
              </p>
              <p class="low" v-if="response01.serviceattitudelevel == 3">
                {{ response01 && response01.serviceattitude }}
                <span>低</span>
              </p>
            </div>
            <div class="public">
              <p>主推类目</p>
              <p class="category">
                {{
                response01 && response01.categoryNames
                ? response01.categoryNames
                : "--"
                }}
              </p>
            </div>
          </template>
          <div
            v-loading="loading"
            v-if="loading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
      </div>
      <div id="collectRoot">
        <div class="rightBox">
          <div class="btn_group">
            <button :class="{ active: input_btn == '0' }" @click="input_btn = '0'">数据概览</button>
            <button :class="{ active: input_btn == '1' }" @click="input_btn = '1'">关联商品</button>
            <button :class="{ active: input_btn == '2' }" @click="input_btn = '2'">关联达人</button>
            <button :class="{ active: input_btn == '3' }" @click="input_btn = '3'">关联直播</button>
            <button :class="{ active: input_btn == '4' }" @click="input_btn = '4'">关联视频</button>
          </div>
          <div class="rig_box">
            <div class="rightBox-content">
              <dataGeneralization v-if="input_btn == '0'"></dataGeneralization>
              <goodsAnalysisShop v-if="input_btn == '1'"></goodsAnalysisShop>
              <TalentAnalysisShop v-if="input_btn == '2'"></TalentAnalysisShop>
              <LiveAnalysisShop v-if="input_btn == '3'"></LiveAnalysisShop>
              <VideoAnalysisShop v-if="input_btn == '4'"></VideoAnalysisShop>
            </div>
          </div>
        </div>
      </div>
      <!-- 口碑趋势 -->
      <el-dialog :visible.sync="showMouthEchart" width="740px" top="22.5vh" class="dialogLoginBox">
        <div class="popup_wrap">
          <div
            v-loading="Loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <div class="popup_wrap-title">
              <div class="title">口碑趋势</div>
            </div>
            <div class="popup_wrap-explain">
              <el-rate
                v-model="scareValue"
                disabled
                :colors="['#4f5058', '#fd7f2c', '#ea4759']"
                score-template="{value}"
              ></el-rate>
              <span
                :style="{
                color:
                  scareValue >= 4
                    ? '#ea4759'
                    : scareValue >= 2 && scareValue < 4
                    ? '#fd7f2c'
                    : '#4f5058'
              }"
              >{{ scareValue }}</span>

              <span v-if="response01.wordofmouthlevel == 1" style="color: #ea4759">高</span>
              <span v-else-if="response01.wordofmouthlevel == 2" style="color: #fd7f2c">中</span>
              <span v-else-if="response01.wordofmouthlevel == 3" style="color: #4f5058">低</span>
              <!-- 先不做这个部分 -->
              <!-- <span>
                &nbsp;&nbsp;带货口碑排名打败
                <i style="font-style:normal;color:#fd893d;">{{ 92.5+'%' }}</i> 同行
              </span>-->
            </div>
            <div class="popup_wrap-echart">
              <KChart
                v-if="showMouthEchart"
                :xData="PraiseData.x"
                :series1="PraiseData.y"
                name1="口碑趋势"
              />
            </div>
          </div>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import dataGeneralization from './dataGeneralization';
import TalentAnalysisShop from './TalentAnalysisShop';
import goodsAnalysisShop from './goodsAnalysisShop';
import LiveAnalysisShop from './LiveAnalysisShop';
import VideoAnalysisShop from './VideoAnalysisShop';
import KChart from './KChartShop.vue';
export default {
  props: [],
  data() {
    return {
      loading: false,
      response01: [],
      changeBoard: true,
      PraiseData: [],
      input_btn: '0',
      scareValue: 4,
      showMouthEchart: false,
      showEg: true,
      Loading: false
      // vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  components: {
    KChart,
    dataGeneralization,
    TalentAnalysisShop,
    goodsAnalysisShop,
    LiveAnalysisShop,
    VideoAnalysisShop
  },
  computed: {},
  created() {
    this.get_data_left01();
  },
  mounted() {},
  watch: {},
  methods: {
    popLine() {
      this.showMouthEchart = true;
      this.showChangeListAPI();
    },
    // 口碑评分
    showChangeListAPI() {
      this.Loading = true;
      this.$axios
        .post('/api/shop/GetShopData2ScoreTrendList', {
          ShopID: this.$route.params.id
        })
        .then(res => {
          if (res.data.code === 0) {
            this.PraiseData = res.data.data.wordOfMouth;
            this.Loading = false;
          }
        });
    },
    // 小店信息
    get_data_left01() {
      this.loading = true;
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/shop/info',
        params: {
          shopId: this.$route.params.id
        }
      })
        .then(response => {
          this.loading = false;
          if (response.data.code == 0) {
            this.response01 = response.data.data;
            this.scareValue = +response.data.data.wordofmouth;
            document.title = this.response01.shopTitle + '-抖音小店商品数据分析-掌上精选';
            this.shopId = response.data.data.shopId;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.loading {
  padding-top: 200px;
}
.br_vip_box {
  margin: 20px 20px 0 20px;
  border-radius: 4px;
  overflow: hidden;
  .el-dialog {
    margin-top: 76px !important;
  }
}
.shopDetails {
  margin-left: @margin-num;
  margin-right: @margin-num;
  margin-top: @margin-num;
  overflow: hidden;
  height: calc(100vh - 94px);

  display: flex;
  .shopDetailsLeft {
    width: 300px;
    background-color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    padding-bottom: 20px;
    padding-left: 20px;
    position: relative;
    .hei3 {
      height: 35px;
    }
    > div {
      &:nth-child(2) {
        display: flex;
        margin-bottom: 30px;
        .imgBox {
          width: 50px;
          height: 50px;
          flex: 0 0 50px;
          background-color: #ffffff;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 12px;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .nickName {
          font-size: 16px;
          font-weight: 600;
          color: #222222;
          align-self: center;
        }
      }
    }
    .public {
      width: 49px;
      font-size: 12px;
      font-weight: normal;
      color: #888888;
      height: 26px;
      line-height: 26px;
      margin-bottom: 12px;
      display: flex;
      img {
        width: 13px;
        height: 13px;
        align-self: center;
        margin-left: 7px;
      }
      > p {
        &:nth-child(1) {
          width: 75px;
          flex: 0 0 75px;
        }
        &:nth-child(2) {
          font-size: 13px;
          font-weight: 600;
          color: #ea4759;
          flex: 1;
          white-space: nowrap;
        }
      }
    }
    .code {
      width: 30px;
      height: 30px;
      background-color: #f5f5f5;
      border-radius: 50%;
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }
  #collectRoot {
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    margin-left: @margin-num;
    background-color: #f1f1f1;
    .rightBox {
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 100%;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-radius: 6px;
      .btn_group {
        text-align: left;
        .active {
          background-color: #fd7f2c;
          color: #ffffff !important;
        }
        button {
          font-size: 14px;
          color: #555;
          padding-left: 23px;
          padding-right: 23px;
          height: 40px;
          background-color: #fff;
          border-radius: 4px;
          margin-right: 7px;
          font-weight: 600;
        }
        button:hover {
          color: #fd7f2c;
        }
      }
    }
    .rightBox-content {
      position: relative;
      background-color: #ffffff;
      border-radius: 6px;
      height: calc(100% - 20px);
      overflow: scroll;
      overflow-x: hidden;
    }
  }
  .display_box {
    width: 99%;
    height: 20px;
    position: absolute;
    top: 50px;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 100;
  }
  .rig_box {
    height: calc(100% - 50px);
    border-radius: 4px;
    padding: 20px 0px 3px 0px;
    margin-top: 10px;
    box-sizing: border-box;
    background: #fff;
  }
  //高
  .high {
    align-self: center;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #ea4759 !important;
    margin-bottom: 3px;
    > span {
      font-size: 13px;
      margin-left: 2px;
    }
  }
  // 中
  .in {
    text-align: center;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #fd7f2c !important;
    margin-bottom: 3px;
    > span {
      font-size: 13px;
      margin-left: 2px;
    }
  }
  // 低
  .low {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #4f5058 !important;

    > span {
      font-size: 13px;
      margin-left: 2px;
    }
  }

  .category {
    // min-width: 74px;
    padding: 0 6px;
    height: 26px;
    flex: 0 0 74px !important;
    text-align: center;
    background-color: #fff7ee;
    border-radius: 4px;
    font-size: 13px !important;
    color: #555555 !important;
  }
  .k_line {
    cursor: pointer;
  }
  .popup_wrap .popup_wrap-title .title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
  }
  .popup_wrap .popup_wrap-explain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 12px;
  }
  .popup_wrap {
    padding: 20px 30px 0;
  }
  .popup_wrap .popup_wrap-echart {
    width: 100%;
    height: 300px;
  }
}
</style>
<style>
.el-date-table td.today span {
  color: #606266 !important;
  font-weight: 400 !important;
}
</style>
